const HtmlWebpackPlugin = require('html-webpack-plugin') //因为下面要用
const { type } = require('os')
// ↑
// 以某个html文件作为模板生成新的html文件    然后     把打包好的代码自动引入

const path = require('path') //因为下面要用path  所以我们要提引入这个

// 暴露出去配置文件的入口 修改默认指定入口文件起点
module.exports = {
  //设置端口号
  devServer: {
    port: 1245,
  },
  // 设置生产模式 ：我们选择   开发   就好了
  mode: 'production',
  // entry 入口的意思
  entry: './src/main.js',
  //
  // output 出口的意思
  // 添加修改默认出口  也被暴露出去了
  output: {
    clean: true, //每次打包之前后清空dist目录下的文件
    // path: path.resolve(__dirname, 'dist'),//官网的写法 目前没学到path.resolve这个方法
    path: path.join(__dirname, 'dist'), //出口的路径
    filename: 'bundle.js', //出口的文件名
  },
  //
  //
  //
  plugins: [
    // 新的html只有一行  因为空格也是占用内存空间的
    new HtmlWebpackPlugin({
      template: './public/index.html', //关键是路径地址要写对  地址是可以更改的//以对应的html文件作为模板生成新的html文件
    }),
  ],
  module: {
    // 处理css的规则
    rules: [
      //loader 的规则
      {
        test: /\.css$/i, //要处理的文件是什么  处理以css结尾的文件
        // css-loader 让webpack认识css文件
        // style-loader 把解析好的代码插入到dom里面
        //
        // ↓
        // 数组中loader的使用顺序是从右到左 别问 问就是规则
        use: ['style-loader', 'css-loader'],
        // 第一步 css文件写入代码
        // 第二步 main.js引入css文件
        // 第三步 官网查找 下载2个包  yarn add css-loader -D 和yarn add style-loader -D
        // 第四步 在根目录写入module: { rules: [ { test: /\.css$/i, use: ["style-loader", "css-loader"], },], },
        // 第五步 yarn build 查看结果
      },
      {
        // 处理less的规则
        test: /\.less$/i,
        // style-loader 让webpack处理less文件
        use: ['style-loader', 'css-loader', 'less-loader'],
        // compiles Less to CSS
        // 第一步 less里面写个代码
        // 第二步 下载包 终端输入 yarn add less less-loader -D 同时下载2个包
        // 第三步 官网输入{test: /\.less$/i,use: ['style-loader','css-loader', 'less-loader', ], },
        // 第四步 yarn build
        // 第五步  关闭easyless拓展
      },
      {
        //如何导入图片的规则
        test: /\.(png|jpg|gif|jpeg)$/i,
        // 内置的模式  ↓
        type: 'asset',
        //会把小于8kb的图片转成base64  这样可以减少http请求
        // 大于8kb的原图片输出
        //如果大于8kb的变成base64  反而变大了文件体积 不值得
      },
      {
        //如何导入文字样式的规则
        test: /\.(eot|svg|ttf|woff|woff2)$/i,
        // 内置的模式  ↓
        type: 'asset/resource', //这个指令会直接输出源文件
        generator: {
          // font/创建一个font的文件夹  []依然使用文件原来的名字
          // [hash:6]文件生成一个唯一标识
          // [ext] 代表使用的文件的后缀扩展名依然使用原来文件的后缀扩展名
          filename: 'font/[name].[hash:6][ext]',
        },
      },
      // 处理js的规则  把高级转换低级
      // 高级语法转换低级语法yarn add -D babel-loader @babel/core @babel/preset-env
      // {
      //   // 要处理的文件
      //   test: /\.js$/,
      //   // 不包括 里面的代码
      //   exclude: /node_modules/,
      //   // 要用什么处理
      //   use: {
      //     // 用babel-loader处理
      //     loader: 'babel-loader',
      //     options: {
      //       presets: ['@babal/preset-env'], //在处理之前  先用@babal/preset-env处理 在用babel-loader处理
      //     },
      //   },
      // },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      // 输入了yarn add webpack-dev-server -D 下载了服务器包
      //在package.json里面输入"serve": "webpack serve"
      // 终端输入yarn serve
      // 更改main.js里面的log打印
      // 查看并且刷新浏览器
    ],
  },
}

//
//
//
//
//
//
//
// 第一步 在根目录下手动创建一个webpack.config.js文件
// 第二步在这个里面输入moudle.exports={enery:'./src/main.js'}
// 第三步 随便在main.js里面写一个东西
// 第四步 packa.json里面输入"scripts": {  "build": "webpack"},

// 第五步 终端输入yarn bulid 打包main.js里面的内容 并且生成一个dist文件夹 里面有个main.js
// 查看dist里面的main.js是否正确的打印了src里面的main.js里面的内容
